<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 400px;
        height: 250px;
        border: 1px solid #000;
        margin: 50px auto;
        overflow: hidden;
      }

      ul {
        height: 250px;
        display: flex;
        /* transform: translateX(-400px); */
        /* transition: all 0.4s; */
      }

      .trans {
        transition: all 0.4s;
      }

      li {
        width: 400px;
        height: 250px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container" @mouseover="tstStop" @mouseout="tstStart">
        <ul
          :class="{ trans: hasTrans }"
          :style="{ width: imgList.length * 400 + 'px', transform: 'translateX(' + -400 * position + 'px)' }"
        >
          <li v-for="(item, index) in imgList" :key="index">
            <img :src="item" alt="" />
          </li>
        </ul>
      </div>

      <button @click="leftClick">左</button>
      <button @click="rightClick">右</button>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      let timer;
      // 表示动画结束了
      let done = true;
      new Vue({
        el: "#app",
        data: {
          imgList: [
            "https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png",
            "https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg",
            "https://gw.alicdn.com/imgextra/i1/O1CN01M5SyDm1Pg2zZulXnH_!!6000000001869-0-tps-520-306.jpg_570x10000Q75.jpg_.webp",
            "https://gw.alicdn.com/imgextra/i4/6000000001734/O1CN01HdNtA41OgDWVn27pT_!!6000000001734-0-octopus.jpg_570x10000Q75.jpg_.webp",
            "https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png",
          ],
          // 向左平移几张，ul的位置
          position: 0,
          hasTrans: true,
        },
        // mounted() {
        //   timer = setInterval(() => {
        //     this.rightClick();
        //   }, 4000);
        // },
        methods: {
          rightClick() {
            // if (this.position < this.imgList.length - 1) {
            //   this.position++;
            // } else {
            //   this.position = 0;
            // }

            if (done) {
              done = false;
              this.hasTrans = true;
              this.position++;
              if (this.position === this.imgList.length - 1) {
                // 等动画停下来
                setTimeout(() => {
                  this.hasTrans = false;
                  this.position = 0;
                }, 400);
              }
              // 每400毫秒最多只能执行一次(前一次结束之前后一次不能执行)
              setTimeout(() => {
                done = true;
              }, 400);
            }
          },
          leftClick() {
            if (this.position > 0) {
              this.position--;
            } else {
              this.position = this.imgList.length - 1;
            }
          },
          // 鼠标移入停止定时器
          tstStop() {
            // clearInterval(timer);
          },
          // 鼠标移出再次开始
          tstStart() {
            // timer = setInterval(() => {
            //   this.rightClick();
            // }, 4000);
          },
        },
      });
    </script>
  </body>
</html>
